import React,{Component} from 'react';
import './shopCard.scss';
import {
  Link
} from 'react-router-dom';
import { delCollection } from 'api/user.js';
let startPoint;
let currPoint;
let moveLeng;
export default class ShopCollect extends Component{
	constructor (props) {
		super(props)
		this.state={
			move:{
				transform: 'translate(0,0)'
			}
		}
	}
	start = (e) => {
		startPoint = e.targetTouches[0].pageX;
		// console.log(startPoint)
	}
	move = (e) => {
		currPoint = e.targetTouches[0].pageX;
		moveLeng = currPoint-startPoint;
		this.setState({
			move: {
				transform: 'translate('+moveLeng+',0)'
			}
		})
	}
	end = () => {
		if(moveLeng < -30){
			this.setState({
				move: {
					transform: 'translate(-5rem,0)'
				}
			})
		} else {
			this.setState({
				move: {
					transform: 'translate(0,0)'
				}
			})
		}
	}
	_delCollection () {
		delCollection({
			collect_id: this.props.shopDetail.favorites_shop_id,
			collect_type: 2
		}).then( res => {
			if( res.code == 1){
				this.props._getCollectionList(2)
				this.setState({
					move: {
						transform: 'translate(0,0)'
					}
				})
			}
		})
	}
	render(){
		return(
			<div className="commodityCard">
				<Link to={
						{
							pathname:'/company',
							state: {shop_id: this.props.shopDetail.shop_id}
						}
					}><p className="commodity_title shop_name">{this.props.shopDetail.shop_name}</p>
				<span className="shop_ent">进入店铺<i className="glyphicon glyphicon-right"></i></span></Link>
				<span className="heng"></span>
				<div  onTouchStart={this.start} onTouchMove={this.move} onTouchEnd={this.end} style={this.state.move}>
					<img src={this.props.shopDetail.shop_logo} className="shopCard_img"/>
					<div className="shop_info">
						<p>联系方式：{this.props.shopDetail.shop_name}</p>
						<p>所在地：{this.props.shopDetail.shop_address}</p>
					</div>
					<span className="collect_cancel" onClick={this._delCollection.bind(this)}>
						取消<br/>收藏
					</span>
				</div>
			</div>
		)
	}
}
